<!--
 * @Author: your name
 * @Date: 2020-12-29 11:10:04
 * @LastEditTime: 2020-12-29 14:30:48
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \go-admin-business\src\components\elMap\index.vue
-->
<template>
    <div class="position_re">
        <el-input v-model="district" class="input" placeholder="请输入关键字搜索" id="tipinput"></el-input>
        <div id="iCenter"></div>
    </div>
</template>
<script>
export default {
    data () {
        return {
            map: '',//保存地址的经纬度
            poiArr: [],//左边搜索出来的数组
            windowsArr: [],//信息窗口的数组
            marker: [],
            mapObj: "",//地图对象
            selectedIndex: -1,
            district: ""
        };
    },
    props: ["address"],
    created () {

    },
    mounted () {
        this.district = this.address;
        this.mapInit()
    },
    watch: {
        address () {
            this.district = this.address;
        },
    },
    methods: {
        //创建一个map
        mapInit () {
            this.mapObj = new AMap.Map("iCenter", {
                resizeEnable: true
            })
            let _t = this;
            //输入提示
            var autoOptions = {
                input: "tipinput"
            };
            var auto = new AMap.Autocomplete(autoOptions);
            var placeSearch = new AMap.PlaceSearch({
                map: this.mapObj
            });  //构造地点查询类
            AMap.event.addListener(auto, "select", select);//注册监听，当选中某条记录时会触发
            function select (e) {
                _t.$emit('getLocation', e)
                placeSearch.setCity(e.poi.adcode);
                placeSearch.search(e.poi.name);  //关键字查询查询
            }
        },

    },
};
</script>
<style lang="scss" scoped>
#iCenter {
    height: 500px;
    position: relative;
    display: flex;
    flex: 1;
}
.input {
    position: absolute;
    top: 10px;
    right: 20px;
    z-index: 99;
    width: 200px;
}
</style>